Define Custom List-item Markers, Bullets for UL, OL Lists 



By default, the HTML UL element displays a bullet (•) in front of each LI list, and the OL element displays list 
items marked with numbers. This list-item markers can be removed, or replaced with other symbol /character, or 
with an image, using CSS properties. 

- The examples contain the CSS and HTML code in the same place, but you should add the CSS code in the <head> 
section of your HTML document, or in external ".ess" file. 

• To remove the bullets from UL lists, or the numbering from OL lists, apply list-style: none; to that UL /OL. 

<style type=" text/ess "> 
ul . nobull , ol . nobull { 
list-style: none; 

} 

</style> 



<ul class="nobull"> 

<li>Free Courses and Tutorials</li> 

<li>CSS lessons</li> 
</ul> 

<ol class="nobull"> 

<li>http : //CoursesWeb . net/</li> 
<li>http : //www.Marplo . net/</li> 

</ol> 



Results: 



Free Courses and Tutorials 
CSS lessons 

http://CoursesWeb.net/ 
http://www.marplo.net/ 



Custom Markers / Bullets 

1. To display a custom marker / bullet for UL / OL lists, apply list-style: none; to that UL /OL. And set the ":before" 
pseudo-class to the LI of that UL /OL, with the "Hex code" for custom bullet to content property (the symbol must 
be specified in Code Hex notation). 

- To this page: http://coursesweb.net/html/html-symbol-entities there are tables with various HTML code hex 
entities. 

- In the body of ":before" pseudo-class you can set the color, size, and other styles for the custom bullet. 

<style type=" text/ess "> 
ul.bulll, ol.bull2 { 
list-style: none; 

} 

ul.bulll li : before { 

content: '\OOBB'; /* code Hex notation */ 
padding-right: 8px; 
color :#0000be; 

} 

ol.bull2 li: before { 

content: '\272C; /* code Hex */ 
padding-right: 8px; 
color :#OObeOO; 

} 

</style> 

<ul class="bulll"> 

<li>Free Courses and Tutorials</li> 
<li>CSS course</li> 



<li>CSS lessons</li> 




</ul> 




<ol class="bull2"> 




<li>http : //CoursesWeb 


.net/</li> 


<li>http: //www.MarPlo 


. net/</li> 


</ol> 





Results: 

» Free Courses and Tutorials 
» CSS course 
» CSS lessons 

http://CoursesWeb.net/ 
& http://www.MarPlo.net/ 

2. Another way to display a custom bullet for UL / OL lists, is to replace the bullet with an image, using the: 
list-style-image: url('image.jpg'); property to that UL /OL. 

<style type=" text/css"> 
ul.imgbull, ol.imgbull { 

list-style-image : url ( ' image . jpg ' ) ; 

} 

</style> 

<ul class="imgbull"> 

<li>Free Courses and Tutorials</li> 

<li>CSS course</li> 

<li>CSS lessons</li> 
</ul> 

<ol class="imgbull"> 

<li>CoursesWeb . net</li> 

<li>Marplo . net</li> 
</ol> 

Demo: 

* Free Courses and Tutorials 

* CSS course 

* CSS lessons 

* CoursesWeb.net 

* MarPlo.net 

list-style-type 

• By default, the OL element displays a numbered list, starting from 1 (1, 2, 3, ...). To set another type of 
numbering, like letters, roman, etc.; use the list-style-type property to that OL. 
This property specifies the type of list- item marker. 

- To start the numbering from other index, add start-'index" attribute in the OL tag. 

<style type=" text/css"> 
ol . numlatin { 

list-style- type : upper-latin; 

} 

ol . numdec { 

list-style- type : decimal-leading-zero; 

} 

</style> 

- Lists with upper latin letters . 
<ol class="numlatin"> 

<li>Free Courses and Tutorials</li> 
<li>CSS course</li> 
<li>CSS lessons</li> 



</ol> 

- Starts the numbering from the 3rd index, with decimal leading zero. 
<ol class="numdec" start="3"> 

<li>MarPlo . net</li> 

<li>Google . com</li> 

<li>CoursesWeb . net</li> 
</ol> 

Demo: 

- Lists with upper latin letters. 

A. Free Courses and Tutorials 

B. CSS course 

C. CSS lessons 

- Starts the numbering from the 3rd index, with decimal leading zero. 

03. MarPlo.net 

04. Google.com 

05. CoursesWeb.net 

• Here is other types of list- item marker; values for list-style-type property. 

- IE9 and Opera 1 1 do not support: cjk-ideographic, Hebrew, hiragana, hiragana-iroha, katakana, and katakana- 
iroha. 

■ none - the marker is removed. 

• inherit - the value is inherited from parent element. 

• circle - the marker is a circle. 

• disc - filled circle, bullet. Default for <ul> (•). 

• square - the marker is a square. 

• cjk-ideographic - plain ideographic numbers. 

• decimal - the marker is a number. This is default for <ol> (1, 2, 3, ...). 

• decimal-leading-zero - number with leading zeros (01, 02, 03, ...). 

• georgian - traditional Georgian numbering. 

• hebrew - traditional Hebrew numbering. 

• hiragana - traditional Hiragana numbering. 

• hiragana-iroha - traditional Hiragana iroha numbering. 

• katakana - traditional Katakana numbering. 

• katakana-iroha - traditional Katakana iroha numbering. 

• lower-alpha - the marker is lower-alpha (a, b, c, ...). 

• lower-greek - the marker is lower-greek. 

• lower-latin - the marker is lower-latin (a, b, c, d, ...). 

• lower-roman - the marker is lower-roman (i, ii, iii, iv, ...). 

• upper-alpha - the marker is upper-alpha (A, B, C, ...). 

• upper-latin - the marker is upper-latin (A, B, C, ...). 

• upper-roman - the marker is upper-roman (I, II, III, IV, ...). 

list-style-position 

By default, the list-item markers appear outside the content flow. To display the list-item markers /bullets inside the 
content flow, apply the: list-style-position: inside; property to UL /OL item. 

This property specifies if the list- item markers should appear inside or outside the content flow. It can take one of 
these values: inside, outside, inherit . 

<style type=" text/css"> 
ul li, ol li { 

border: lpx solid blue; 

} 

ul.insbull, ol.insbull { 

list-style-position: inside; 

} 

</style> 



<ul> 

<li>List K/li> 

<li>List 2</li> 
</ul> 

- List-item markers inside the content flow. 
<ul class="insbull"> 

<li>Free Courses and Tutorials</li> 

<li>CSS course</li> 

<li>CSS lessons</li> 
</ul> 

<ol class="insbull"> 

<li>MarPlo . net</li> 

<li>CoursesWeb . net</li> 
</ol> 



Demo: 

• List 1 



List 2 



- List-item markers inside the content flow. 

# Free Courses and Tutorials 

# CSS course 

# CSS lessons 

1. MarPlo.net 

2. CoursesWeb.net 



